<script>
import CardContainer from "../components/CardContainer.vue";
import SecondTitle from "../components/SecondTitle.vue";
import ClueRegionalProportion from "../components/ClueRegionalProportion.vue";
import ClueSevenDays from "../components/ClueSevenDays.vue";
import ClueExpected from "../components/ClueExpected.vue";
import { getCardStyle } from "../utils/index";
export default {
  components: {
    CardContainer,
    SecondTitle,
    ClueRegionalProportion,
    ClueSevenDays,
    ClueExpected,
  },
  props: {
    year: Number,
  },
  data() {
    return {
      style: {
        width: "460px",
        height: "960px",
      },
    };
  },
  mounted() {
    this.getComputedStyle();
    window.addEventListener("resize", this.getComputedStyle);
  },
  methods: {
    getComputedStyle() {
      const { width, height } = getCardStyle();
      this.style.width = width;
      this.style.height = height;
    },
  },
};
</script>

<template>
  <div>
    <CardContainer title="线索登记情况" right-title="" :style="style">
      <SecondTitle title="单位占比" :custom-style="style" />
      <ClueRegionalProportion :year="year" />
      <SecondTitle title="线索数量趋势" :custom-style="style" />
      <ClueSevenDays />
      <SecondTitle title="线索逾期" />
      <ClueExpected />
    </CardContainer>
  </div>
</template>

<style lang="scss" scoped></style>
